<template>
  <div class="hello">
    <div class="waterfall">
      <ul id="example-1">
        <li
          v-for="item in photosList"
          v-bind:key="item.collect_count"
        ><img @click="details()" :src="item.images.small" alt:="item.alt">
          <div style="padding: 14px;">
            <span>{{ item.title }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.year }}</time>
              <div type="text" class="button">{{ item.directors[0].name }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast, Indicator } from 'mint-ui'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      photosList: []
    }
  },
  created() {
    // this.getPhotos()
    Indicator.open()
    this.getMovies()
  },

  mounted() {
    console.log('mounted')
  },
  methods: {
    async getPhotos() {
      // 这里用try catch包裹，请求失败的时候就执行catch里的
      try {
        const params = {
          page: 1,
          per_page: 1,
          order_by: 'latest'
        }
        const res = await this.$api.unsplash.viewPhotos(params)
        this.photosList = res
        console.log(res)
      } catch (e) {
        console.log(e)
      }
    },
    async getMovies() {
      try {
        const params = {
          start: 0,
          count: 10
        }
        const res = await this.$api.douban.movieList(params)
        this.photosList = res.subjects
        console.log(this.photosList)
        Indicator.close()
      } catch (e) {
        console.log(e)
      }
    },
    details() {
      Toast('测试一下')
      // this.$router.push({
      //   path: '/content',
      //   query: {
      //     testId: '001'// 此种形式会显示在路由上 某些经常使用的页面建议使用
      //   }
      // })
      this.$router.push({
        name: 'Content',
        params: {
          testId: '001'// 此种形式不会会显示在路由上 某些经常使用的页面建议使用
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
